<template>
  <d2-container>
    <div class="flex-1 ml-2">
      <div class="flex-1 row">
        <div class="font-s-3 font-w mt-2">{{ lotterylDetail.period }}奖品详情</div>
      </div>
      <div class="flex-1 mt-2">
        <div><el-button type="danger" size="small" icon="el-icon-plus" @click="addPrizeDialog">添加奖品</el-button>
        </div>
      </div>
      <el-table :data="prizeList" stripe style="width: 100%;">
        <el-table-column align="center" label="序号" type="index" width="65" />
        <el-table-column label="奖品名称" prop="name" width="130" />
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini">修改</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogPrizeVisible" width="35%" title="添加/编辑奖品">
      <el-form :model="formPrize" ref="form" label-width="80px">
        <el-form-item label="奖品名称" prop="name">
          <div style="width: 70%;">
            <el-input v-model="formPrize.name"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="中奖商品" prop="product">
          <div style="width: 60%;">
            <el-select v-model="formPrize.product" clearable filterable remote :remote-method="searchProducts"
              placeholder="请输入商品名进行搜索">
              <el-option v-for="item in productList" :key="item.id" :label="item.product_name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="中奖数量" prop="people_num">
          <el-input-number v-model="formPrize.people_num" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPrizeVisible = false">取 消</el-button>
        <el-button type="primary" v-if="!dialogPrizeEdit" @click="prizeEdit">修 改</el-button>
        <el-button type="primary" v-if="dialogPrizeEdit" @click="prizeSubmit">保 存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    prizeUrl,
    lotterylDetailUrl
  } from "@/utils/promotion"
  import {
    productListUrl,
  } from '@/utils/product'
  export default {
    data() {
      return {
        lotterylDetail: '',
        prizeList: [],
        productList: [],
        queryInfoPrize: {
          lottery_id: '',
          page: 1,
          pageSize: 10
        },
        queryInfoProduct: {
          product_state: 0,
          search: '',
          page: 1,
          pageSize: 10
        },
        formPrize: {
          name: '',
          lottery: '',
          product: '',
          people_num: 1
        },
        dialogPrizeEdit: true,
        dialogPrizeVisible: false
      }
    },
    mounted() {
      this.formPrize.lottery = this.$route.query.lotteryId
      this.queryInfoPrize.lottery_id = this.$route.query.lotteryId
      this.getLotteryDetail()
      this.getPrizeList()
      this.getProductList()
    },

    methods: {
      getLotteryDetail() {
        this.$get(lotterylDetailUrl + this.formPrize.lottery + '/').then(res => {
          if (res.data.code == 200) {
            this.lotterylDetail = res.data.data
          }
        })
      },
      getPrizeList() {
        this.$get(prizeUrl, this.queryInfoPrize).then(res => {
          if (res.data.code == 200) {
            this.prizeList = res.data.data.list
          }
        })
      },
      searchProducts(query) {
        this.getProductList(query)
      },
      getProductList(query) {
        this.queryInfoProduct.search = query;
        this.$get(productListUrl, this.queryInfoProduct).then(res => {
          if (res.data.code == 200) {
            this.productList = res.data.data.list
          }
        })
      },
      addPrizeDialog() {
        this.dialogPrizeVisible = true
        this.dialogPrizeEdit = true
      },
      prizeSubmit() {
        this.$post(prizeUrl, this.formPrize).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.dialogPrizeVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.getPrizeList()
            this.formPrize = {}
          }
        })
      },
      prizeEdit() {

      }
    }
  }
</script>

<style>
</style>